<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>添加客户</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
  <!-- 引入 Vue.js -->
  <script src="/assets/vue/vue.global.js"></script>
  <!-- 引入 Element Plus -->
  <script src="/assets/element-plus/index.full.js"></script>
  <!-- 引入 Axios -->
  <script src="/assets/axios/axios.js"></script>
  <!-- 引入自定义安全模块 -->
  <script src="/assets/oa/security.js"></script>
  <style>
    /* 自定义样式 */
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f2f5;
    }
    .upload-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .preview-image-container {
      max-width: 100%;
      max-height: 80vh;
      overflow: hidden;
    }
    .preview-image {
      max-width: 200px;
      max-height: 200px;
      height: 20%;
      display: block;
      margin: auto;
      object-fit: contain;
    }
    .upload-button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 页面标题 -->
  <h2>添加客户</h2>
  <!-- 表单 -->
  <el-form ref="form" :model="customer" label-width="100px">
    <el-form-item label="账户名" prop="username">
      <el-input v-model="customer.username" placeholder="请输入账户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="customer.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="customer.confirmPassword" type="password" placeholder="请确认密码"></el-input>
    </el-form-item>
    <el-form-item label="客户名" prop="name">
      <el-input v-model="customer.name" placeholder="请输入客户名"></el-input>
    </el-form-item>
    <el-form-item label="行业" prop="industry">
      <el-select v-model="customer.industry" placeholder="请选择行业">
        <el-option v-for="(item, index) in industries" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>

    <!-- 上传按钮和图片 -->
    <div class="upload-container">
      <div class="preview-image-container">
        <img v-if="customer.previewImage" class="preview-image" :src="customer.previewImage" alt="预览图像">
      </div>
      <el-upload
              class="upload-demo"
              action="/uploadProfilePicture"
              :show-file-list="false"
              :on-success="handleUploadSuccess"
              :before-upload="beforeUpload"
              :on-change="handleFileChange"
              :multiple="false">
        <el-button class="upload-button" type="primary" size="small">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过 500kb</div>
      </el-upload>
    </div>

    <!-- 添加客户按钮 -->
    <el-form-item style="margin-top: 10px;"> <!-- 调整按钮与上传容器之间的距离 -->
      <el-button type="primary" @click="addCustomer">添加客户</el-button>
    </el-form-item>
  </el-form>
</div>

<script>
  // 定义 Main 组件
  var Main = {
    data() {
      return {
        customer: {
          name: '',
          username: '',
          password: '',
          confirmPassword: '',
          industry: '',
          previewImage: '', // 预览图像的 base64 编码
          profilePicture: '' // 图片文件
        },
        industries: [] // 存储行业数据
      }
    },
    mounted() {
      // 页面加载时获取行业列表数据
      this.fetchIndustryNames();
    },
    methods: {
      // 获取行业列表数据
      fetchIndustryNames() {
        axios.get("/industry/queryNames")
                .then(response => {
                  console.info(response)
                  // 将字符串列表转换为对象列表
                  this.industries = response.data.data.map(name => ({ label: name, value: name }));
                })
                .catch(error => {
                  console.error("获取行业列表失败：" + error);
                });
      },
      addCustomer() {
        if (this.customer.password !== this.customer.confirmPassword) {
          this.$message.error('密码不一致');
          return;
        }
        axios.post("/cusinfo/add", this.customer)
                .then(response => {
                  console.log("客户添加成功");
                  this.$message.success('客户添加成功');
                  // 清空表单
                  this.resetForm();
                })
                .catch(error => {
                  console.error("客户添加失败：" + error);
                  this.$message.error('客户添加失败');
                });
      },
      resetForm() {
        this.customer.name = '';
        this.customer.username = '';
        this.customer.password = '';
        this.customer.confirmPassword = '';
        this.customer.industry = '';
        this.customer.previewImage = '';
        this.customer.profilePicture = '';
      },
      handleUploadSuccess(response, file) {
        console.info("返回的图片名称")
        console.info(response)
        this.customer.profilePicture = response; // 假设后端返回上传成功后的图片地址
      },
      beforeUpload(file) {
        const isImage = file.type.startsWith('image/'); // 检查文件类型是否为图片
        const isLt500K = file.size / 1024 < 1000;

        if (!isImage) {
          this.$message.error('只能上传图片文件！');
        }
        if (!isLt500K) {
          this.$message.error('上传头像图片大小不能超过 1000KB！');
        }
        return isImage && isLt500K;
      },
      handleFileChange(file, fileList) {
        // 用户选择文件后，读取文件并显示预览图像
        if (fileList.length > 0) {
          const reader = new FileReader();
          reader.onload = (e) => {
            this.customer.previewImage = e.target.result;
          };
          reader.readAsDataURL(file.raw);
        }
      }
    }
  };

  // 创建 Vue 应用
  const app = Vue.createApp(Main);
  // 使用 Element Plus
  app.use(ElementPlus);
  // 挂载至 #app
  app.mount("#app");
</script>

</body>
</html>
